<template>
  <m-layout>
    <div slot="header">
      <mt-header :title="courseName" >
        <m-header-back slot="left"/>
      </mt-header>
      <div class="search">
        <mt-search v-model="searchVal" @input="search" placeholder="搜索内容"></mt-search>
      </div>
    </div>
    <div slot="body" class="leave">
      <m-section :border-top="false" class="toolbar">
       <div class="checkAll" v-show="!checkStatus">
          <m-checkbox :checked="checked" @change="checkAll" >全选</m-checkbox>
       </div>
       <div class="checkAction" @click="changeStatus" v-show="options.length">
         <a href="javascript:;" class="link"  v-if="checkStatus">多选</a>
         <a href="javascript:;" class="link"  v-else>单选</a>
       </div>
      </m-section>
      <m-section>
        <div class="checkList">
          <div class="listBox" v-show="checkStatus">
            <ul>
              <li v-for="(item,index) in options" :key="index">
                <div class="item">
                   <span><img src="/static/images/default/avatar.png" alt=""></span>
                   <span :class="['name',{'middle': !item.status}]">{{item.name}}</span>
                   <span class="time" v-if="item.status">{{item.modifyTime | formatTime}}</span>
                    <p class="status">
                      <span class="statu" v-if="item.status!==0">{{item.status | formatStatus}}</span>
                      <span class="action">
                        <a href="javascript:;" class="link" v-if="item.status!==0" @click="revokeMsg(item,index)">撤销</a>
                        <a href="javascript:;" class="link"  @click="showMsg(item,3,index)" v-if="item.status===0 && properties!=='2'">请假</a>
                        <a href="javascript:;" class="link" @click="showMsg(item,1,index)" v-if="item.status===0">销课</a>
                      </span>
                    </p>
                </div>
              </li>
            </ul>
          </div>
          <m-checkbox-group v-model="checkboxValue" v-show="!checkStatus"
            v-infinite-scroll="loadMore"
            infinite-scroll-disabled="loading"
            infinite-scroll-distance="10"
            :infinite-scroll-immediate-check="true"
          >
            <m-checkbox
              v-for="(item,index) in options"
              :disabled="item.status !==0"
              :value="item.id"
              :key="index"
              >
              <div class="item">
                  <span><img src="/static/images/default/avatar.png" alt=""></span>
                  <span :class="['name',{'middle': !item.status}]">{{item.name}}</span>
                  <span class="time" v-if="item.status">{{item.modifyTime}}</span>
                  <p class="status">
                    <span class="statu" v-if="item.status">{{item.status | formatStatus}}</span>
                  </p>
              </div>
            </m-checkbox>
          </m-checkbox-group>
       </div>
      </m-section>
    </div>
    <div slot="bottom" v-show="!checkStatus" class="btn">
      <span>
        <mt-button type="primary" size="large" plain @click="leaveAll(1)">销课</mt-button>
      </span>
      <span>
        <mt-button type="primary" size="large" plain  @click="leaveAll(3)">请假</mt-button>
      </span>
    </div>
  </m-layout>
</template>

<script>
import api from 'api/named'
import { Search, MessageBox, Toast } from 'mint-ui'
import _ from 'lodash/core'
export default {
  components: {
    Search
  },
  computed: {
  },
  data () {
    return {
      courseName: '',
      classScheduleId: '',
      teacherId: '',
      properties: '',
      checked: false,
      checkStatus: true,
      checkboxValue: [],
      checkboxName: [],
      searchVal: '',
      options: [],
      total: '',
      rows: 15,
      page: 1,
      loading: false
    }
  },
  filters: {
    formatStatus (val) {
      let status = {
        0: '未签到',
        1: '已签到',
        2: '缺勤',
        3: '请假',
        4: '补课'
      }
      return status[val]
    },
    formatTime (val) {
      return val ? new Date(val).format('yyyy-MM-dd') : ''
    }
  },
  methods: {
    // 下拉刷新
    loadMore () {
      if (this.options.length >= this.total) {
        this.loading = true
        return false
      }
      this.studentCount()
    },
    // 查询学员
    studentCount () {
      console.log(this.searchVal)
      api.studentCount({
        classScheduleId: this.classScheduleId,
        teacherId: this.teacherId,
        search: this.searchVal,
        page: this.page,
        rows: this.rows
      }).then((res) => {
        this.total = res.data.pageVo.total
        let arr = res.data.pageVo.list.map((item) => {
          item.id += ''
          return item
        })
        this.options.push(...arr)
        this.page += 1
      })
    },
    search () {
      _.throttle(this.studentCount(), 200)
      // this.studentCount()
    },
    changeStatus () {
      this.checkStatus = !this.checkStatus
    },
    checkAll () {
      if (!this.checked) {
        this.options.forEach((el, index) => {
          if (!el.status) {
            this.checkboxValue.push(el.id)
            this.checkboxName.push(el.name)
          }
        })
      } else {
        this.checkboxValue = []
        this.checkboxName = []
      }
      this.checked = this.checkboxValue.length > 0
    },
    showMsg (item, status, index) {
      let title = status === 1 ? '确认销课?' : '确认请假？'
      MessageBox({
        title: title,
        message: `学员：${item.name}`,
        showCancelButton: true
      })
        .then((action) => {
          if (action === 'confirm') {
            this.leave([item.id], status, index)
          }
        })
    },
    leave (idList, status, index) {
      let suc = status === 1 ? '销课成功' : '请假成功'
      let err = status === 1 ? '销课失败' : '请假失败'
      api.doAttendance({
        status: status,
        // teacherId: this.teacherId,
        modifyId: '',
        idList: idList.join(',')
      }).then((res) => {
        if (res.result === '0') {
          if (!!index || index === 0) {
            this.options[index].status = status
          } else {
            this.options.forEach((el) => {
              el.status = status
            })
            this.checkboxValue = []
            this.checked = false
          }
          Toast({
            message: suc,
            duration: 1000
          })
        } else {
          Toast({
            message: err,
            duration: 1000
          })
        }
      }).catch(() => {
        Toast({
          message: err,
          duration: 1000
        })
      })
    },
    leaveAll (status) {
      if (!this.checkboxValue.length) {
        let text = status === 1 ? '销课' : '请假'
        Toast({
          message: `没有学员可以${text}`,
          duration: 1000
        })
        return false
      }
      let title = status === 1 ? '确认销课?' : '确认请假？'
      MessageBox({
        title: title,
        message: `学员：${this.checkboxName.join('，')}`,
        showCancelButton: true
      })
        .then((action) => {
          if (action === 'confirm') {
            this.leave(this.checkboxValue, status, '')
          }
        })
    },
    revokeMsg (item, index) {
      MessageBox({
        title: '确认撤销',
        message: `学员：${item.name}`,
        showCancelButton: true
      })
        .then((action) => {
          if (action === 'confirm') {
            this.revoke([item.id], index)
          }
        })
    },
    revoke (idList, index) {
      api.doAttendance({
        status: 0,
        modifyId: '',
        idList: idList.join(',')
      }).then((res) => {
        if (res.result === '0') {
          this.options[index].status = 0
          Toast({
            message: '撤销成功',
            duration: 1000
          })
        }
      })
    }
  },
  mounted () {
    let arg = this.$route.query
    this.courseName = arg.courseName
    this.classScheduleId = arg.classScheduleId
    this.teacherId = arg.teacherId
    this.properties = arg.properties
    this.studentCount()
  }
}
</script>

<style lang="scss" scoped>
.leave{
  position: relative;
  .search{
    overflow: hidden;
    .mint-search{
      height: auto;
    }
  }
  .toolbar{
    overflow: auto;
    .checkAll{
      float: left;
      width: 50%;
    }
    .checkAction{
      float: right;
      padding: .25rem .4rem;
    }
  }
  .checkList{
    background-color: #fff;
    .listBox{
      li{
        position: relative;
        padding: 0.2rem;
        &:after{
          content: " ";
          border-bottom: 1px solid $border-color-base;
          display: block;
          height:0;
          width:100%;
          position: absolute;
          left: 0;
          bottom:0;
          transform: scaleY(0.5);
        }
      }
    }
    .item{
      font-size: $font-size-small;
      position: relative;
      overflow: hidden;
      img{
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 10px;
        float: left;
      }
      .name{
        display: inline-block;
        padding-top: 0.1rem;
      }
      .middle{
        display: inline-block;
        line-height: 0.8rem;
      }
      .time{
        color: $color-sub;
        display: block;
        font-size: 0.2rem;
      }
      .status{
        margin: 0;
        position: absolute;
        right: 0.2rem;
        top:0.25rem;
        .action{
          a{
            margin-left: 0.2rem;
          }
        }
        .statu{
          color: $color-sub;
        }
      }
    }
  }
}
.btn{
  text-align: center;
    span{
      display: inline-block;
      width: 45%;
      margin:0 1%;
    }
  }
</style>
